<template>
    <div>
        <div class="top">
            <div class="top-nav">

                <router-link to="/homePage" class="logo">BreadBlog</router-link>
                <router-link to="/homePage" class="nav-item">博客</router-link>
                <router-link to="/web-category" class="nav-item">分类</router-link>
                <router-link to="/web-special" class="nav-item">推荐</router-link>
                <router-link to="/web-user" class="nav-item">成员</router-link>
                <router-link to="/web-message" class="nav-item">GPT</router-link>
                <router-link to="/blog/list" class="nav-item">后台管理</router-link>
                <div id="main3" style="width: 160px; height: 100px; float: right;"></div>
            </div>
        </div>

        <div class="body-container">
            <router-view/>

        </div>

        <div class="footer">
            <div>花自向阳开，人终朝前走</div>
            <div>渝ICP备2024019859号</div>
        </div>

    </div>
</template>

<script setup>
    import {ref, watch} from 'vue';
    import {useRouter} from 'vue-router';

    const router = useRouter();
    const menus = ref([
        {
            name: "博客",
            path: "/homePage"
        },
        {
            name: "分类",
            path: "/web-category"
        },
        {
            name: "专题",
            path: "/web-special"
        },
        {
            name: "成员",
            path: "/web-user"
        },
        {
            name: "留言板",
            path: "/web-message"
        },
        {
            name: "后台管理",
            path: "/blog/list"
        },
    ])
    import {onMounted} from 'vue';
    import * as echarts from 'echarts';

    onMounted(() => {
        var chartDom = document.getElementById('main3');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            graphic: {
                elements: [
                    {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        style: {
                            text: 'BreadBlog',
                            fontSize: 30,
                            fontWeight: 'bold',
                            lineDash: [0, 200],
                            lineDashOffset: 0,
                            fill: 'transparent',
                            stroke: '#000',
                            lineWidth: 1
                        },
                        keyframeAnimation: {
                            duration: 11000,
                            loop: true,
                            keyframes: [
                                {
                                    percent: 0.7,
                                    style: {
                                        fill: 'transparent',
                                        lineDashOffset: 200,
                                        lineDash: [200, 0]
                                    }
                                },
                                {
                                    percent: 0.8,
                                    style: {
                                        fill: 'transparent'
                                    }

                                },
                                {
                                    percent: 1,
                                    style: {
                                        fill: '#aaf711'
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        };

        option && myChart.setOption(option);
    });
</script>

<style lang="scss">

</style>